<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import type { UserFans } from '@/types/user-details'
import type { HotTopicType } from '@/types/hot-topic'
import searchBox from '@/components/search-box.vue'
import userFans from '@/components/user-fans.vue'
import forumPublisher from '@/components/forum-publisher.vue'
import hotandTopic from '@/components/topic/hotand-topic.vue'


// 存储搜索关键词
const keyword = ref('')
// tab切换栏
const detailsTabData = ref([
  { id: 1, text: '帖子' },
  { id: 2, text: '用户' },
  { id: 3, text: '话题' },
])
// tab状态
const activeTab = ref(3)


// 关联用户
const userFansData = ref<UserFans[]>([
  { id: 1, name: '毕业燕燕', grade: '大四', major: '视觉传达', avatar: '/static/user/user.jpg' },
  { id: 2, name: '毕业燕燕', grade: '大四', major: '视觉传达', avatar: '/static/user/user.jpg' },
  { id: 3, name: '毕业燕燕', grade: '大四', major: '视觉传达', avatar: '/static/user/user.jpg' },
  { id: 4, name: '毕业燕燕', grade: '大四', major: '视觉传达', avatar: '/static/user/user.jpg' },
  { id: 5, name: '毕业燕燕', grade: '大四', major: '视觉传达', avatar: '/static/user/user.jpg' },
  { id: 6, name: '毕业燕燕', grade: '大四', major: '视觉传达', avatar: '/static/user/user.jpg' },
  { id: 7, name: '毕业燕燕', grade: '大四', major: '视觉传达', avatar: '/static/user/user.jpg' },
  { id: 8, name: '毕业燕燕', grade: '大四', major: '视觉传达', avatar: '/static/user/user.jpg' },
  { id: 9, name: '毕业燕燕', grade: '大四', major: '视觉传达', avatar: '/static/user/user.jpg' },
  { id: 10, name: '毕业燕燕', grade: '大四', major: '视觉传达', avatar: '/static/user/user.jpg' },
])

// 话题内容
const userTopicData = ref<HotTopicType[]>([
  { id: 1, avatar: '/static/user/user.jpg', title: '#毕业季', quantity: 1689 },
  { id: 2, avatar: '/static/user/user.jpg', title: '#开学季', quantity: 1530 },
  { id: 3, avatar: '/static/user/user.jpg', title: '#毕业季', quantity: 1400 },
  { id: 4, avatar: '/static/user/user.jpg', title: '#毕业季', quantity: 1003 },
  { id: 5, avatar: '/static/user/user.jpg', title: '#毕业季', quantity: 892 }
])

// 接收跳转参数
onLoad((options: any) => {
  if (options.keyword) {
    keyword.value = decodeURIComponent(options.keyword)
    console.log('搜索关键词:', keyword.value)
    // 这里可以调用接口加载数据
  }
})

// 处理搜索框的新搜索（可选）
const onEnterKey = (newKeyword: string) => {
  keyword.value = newKeyword
  // 重新加载数据
}

// 切换 tab
const handSwitchTab = (tabId: number) => {
  console.log(tabId)
  activeTab.value = tabId
}

// 返回首页
const onCancel = () => {
  uni.switchTab({ url: '/pages/home/index' })
}
</script>


<template>
  <view class="details">
    <!-- 搜索框（显示当前关键词） -->
    <searchBox ref="inputRef" @enterKey="onEnterKey" @cancel="onCancel" :initialValue="keyword" />

    <!-- 根据 keyword 渲染帖子/用户/话题 tab -->
    <view class="details-tab">
      <!-- 帖子 -->
      <view :class="{ 'active-tab': activeTab === item.id }" v-for="item in detailsTabData" :key="item.id"
        @click="handSwitchTab(item.id)">
        <h1>{{ item.text }}</h1>
      </view>
    </view>

    <!-- 根据 activeTab 显示不同内容 -->
    <view class="tab-content">
      <!-- 帖子内容 -->
      <view v-if="activeTab === 1">
        <forumPublisher />
      </view>
      <!-- 用户内容 -->
      <view v-if="activeTab === 2">
        <userFans :fansData="userFansData" />
      </view>
      <!-- 话题内容 -->
      <view v-if="activeTab === 3">
        <hotandTopic :topicData="userTopicData"/>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.details {
  &-tab {
    display: flex;
    margin: 40rpx 0;
    font-size: 35rpx;
    gap: 100rpx;

    view {
      cursor: pointer;
      padding: 10rpx 10rpx;

      &.active-tab {
        color: #a589fe;
        border-bottom: 4rpx solid #007AFF;
      }
    }
  }
}
</style>